import { useState } from 'react';
import { HashRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
import Home from './Home';
import './index.less';


const routers = [
    {
        path: '/',
        name: 'home',
        component: Home,
        exact: true,
    },
    {
        path: '/about',
        name: 'about',
        component: () => <>其他页</>,
    }
]

function App() {
    const [pathName, setPathName] = useState(window.location.hash.substring(1));

    return (
        <div className="app">
            <Router>
                <div className="app_router">
                    <span className="app_log">圆规计划</span>
                    <div className="router">
                        <ul>
                            {
                                routers.map((item, index) => (
                                    <li key={`${item.path}${index}`}>
                                        <Link
                                            style={pathName === `${item.path}` ? { color: '#0cf' } : {}}
                                            to={item.path}
                                            onClick={() => {
                                                setPathName(item.path);
                                            }}
                                        >
                                            <span className="router_name">{item.name}</span>
                                        </Link>
                                    </li>
                                ))
                            }</ul>
                    </div>
                </div>
                <div className="app_main">
                    <Switch>
                        {
                            routers.map((item, index) => (
                                <Route key={`${item.name}${index}`} exact={item.exact} path={item.path} component={item.component} />
                            ))
                        }
                        <Redirect from="*" to="/" />
                    </Switch>
                </div>
            </Router>
        </div >
    )
}

export default App
